<template>
  <el-dialog 
    v-model="visible" 
    title="实验弹窗" 
    width="50%"
    @close="handleClose">
    <p>这是通过 ref 方法打开的弹窗！</p>
    <el-table :data="verifyTabledata" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="数据组名称" width="180"></el-table-column>
      <el-table-column prop="value" label="数值"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  verifyTabledata: {
    type: Array,
    required: true
  }
})
const visible = ref(false)

// 暴露给父组件的方法
const openDialog = () => {
  visible.value = true
  console.log('弹窗已打开')
}

const handleClose = () => {
  console.log('弹窗已关闭')
}

// 关键！暴露方法给父组件
defineExpose({ openDialog })
</script>